import React from 'react'
import { Button, Form, Tag } from 'antd'
import Searcher from 'components/searcher'
import ListSearcher from 'components/list-searcher'
const FormItem = Form.Item;

export default {
  key: 'searcher',
  name: 'Searcher 搜索器',
  author: '张然',
  description: '用于从大量数据中直接搜索数据并选择的场景。',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [{
        param: 'type', description: '内部::ListSearcher::的::type::，详情见下方::ListSearcher::。', type: 'string', defaultValue: '-'
      },{
        param: 'searcherItem', description: '内部::ListSearcher::的::searcherItem::，详情见下方::ListSearcher::。', type: 'object', defaultValue: '-'
      },{
        param: 'placeholder', description: '组件没有选择值时显示的文字。', type: 'string', defaultValue: '请选择'
      },{
        param: 'disabled', description: '组件是否禁用。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'labelKey', description: '内部::ListSearcher::的::labelKey::，详情见下方::ListSearcher::。', type: 'string', defaultValue: '-'
      },{
        param: 'listExtraParams', description: '内部::ListSearcher::的::extraParams::，详情见下方::ListSearcher::。', type: 'object', defaultValue: '-'
      },{
        param: 'single', description: '内部::ListSearcher::的::single::，详情见下方::ListSearcher::。', type: 'object', defaultValue: '-'
      },{
        param: 'onChange', description: '组件值改变时的回调。', type: 'function(value)', defaultValue: '-'
      },{
        param: 'value', description: '已选择的值数组，需要包含::labelKey::需要的值与::searcherItem::中::key::值。', type: 'array', defaultValue: '[]'
      },{
        param: 'showNumber', description: '是否显示已选择XX条。', type: 'boolean', defaultValue: 'true'
      },{
        param: 'onlyNeed', description: '如果设置了该值，::onChange::仅返回该属性设置的对应::key::值。', type: 'string', defaultValue: '-'
      },{
        param: 'newline', description: '选择框是否换行显示值。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'maxNum', description: '内部::ListSearcher::的::maxNum::，详情见下方::ListSearcher::。', type: 'number', defaultValue: '-'
      },{
        param: 'method', description: '内部::ListSearcher::的::method::，详情见下方::ListSearcher::。', type: 'string', defaultValue: 'get'
      },{
        param: 'showClear', description: '是否显示清空按钮。', type: 'boolean', defaultValue: 'true'
      },{
        param: 'descriptionKey', description: '内部::ListSearcher::的::descriptionKey::，详情见下方::ListSearcher::。', type: 'string', defaultValue: '-'
      },{
        param: 'searchPlaceHolder', description: '内部::ListSearcher::的::searchPlaceHolder::，详情见下方::ListSearcher::。', type: 'string', defaultValue: '请输入'
      },{
        param: 'showDetail', description: '内部::ListSearcher::的::showDetail::，详情见下方::ListSearcher::。', type: 'boolean', defaultValue: 'false'
      }],
      description: ''
    },
    {
      title: 'ListSearcher',
      data: [{
        param: 'visible', description: '控制组件是否显示。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'type', description: '组件的数据结构方法，本项目中存储在::share/searcherData.js::中，只能为已定义的数据结构中的一个的key值，数据结构配置见下方::searcherItem::。', type: 'string', defaultValue: '-'
      },{
        param: 'single', description: '是否单选。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'maxNum', description: '最多选择多少条数据，如果不设置则没有限制。', type: 'number', defaultValue: '-'
      },{
        param: 'searcherItem', description: '如果::type::定义的数据结构并不能满足特定需求，可以通过改造数据结构并通过此值传入形成特定的选择器，具体配置见下方::searcherItem::。', type: 'object', defaultValue: '-'
      },{
        param: 'method', description: '::type::指定的数据结构或::searcherItem::数据内请求对应::url::时的方法。', type: 'string', defaultValue: 'get'
      },{
        param: 'extraParams', description: '::type::指定的数据结构或::searcherItem::数据内请求对应::url::时需要的额外参数。', type: 'object', defaultValue: '-'
      },{
        param: 'labelKey', description: '请求::type::指定的数据结构或::searcherItem::内url后的结果数组或::selectedData::数组中需要在::Tag::内与下方列表中当作::label::显示的对象内对应字段名或渲染方法，该值将会成为搜索条件。', type: 'string|function(item)', defaultValue: '-'
      },{
        param: 'descriptionKey', description: '请求::type::指定的数据结构或::searcherItem::内url后的结果数组或::selectedData::数组中需要在下方列表中每一项的描述显示的对象内对应字段名或渲染方法，该值将会成为搜索条件。', type: 'string|function(item)', defaultValue: '-'
      },{
        param: 'selectedData', description: '已选择的值列表，每个对象必须包含::type::指定的数据结构或::searcherItem::内指定的::key:字段与::labelKey::需要的字段。', type: 'array', defaultValue: '-'
      },{
        param: 'onOk', description: '点击确认按钮的回调。', type: 'function(value{result, type})', defaultValue: '() => {}'
      },{
        param: 'onCancel', description: '点击取消或右上角关闭按钮的回调。', type: 'function', defaultValue: '() => {}'
      },{
        param: 'afterClose', description: '完全关闭组件后的回调。', type: 'function', defaultValue: '() => {}'
      },{
        param: 'showDetail', description: '是否在内部列表上方显示已选择值的::Tag::。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'searchPlaceHolder', description: '组件内上方搜索输入框没有选择值时显示的文字。', type: 'string', defaultValue: '请输入'
      },{
        param: 'externalLabel', description: '请求::type::指定的数据结构或::searcherItem::内url后的结果数组或::selectedData::数组中需要在下方列表中每一项的::label::后显示的额外字段的对象内对应字段的渲染方法，该值将不会成为搜索条件。', type: 'function(item)', defaultValue: '-'
      },{
        param: 'filterRule', description: '列表筛选条件，返回true才显示。', type: 'function(item)', defaultValue: '() => true'
      }],
      description: '每一个::Searcher::内部都有有一个::ListSearcher::，内部的::ListSearcher::依附于外部::Searcher::的参数，但是也可以单独拿出来使用。'
    },
    {
      title: 'searcherItem',
      data: [{
        param: 'title', description: '标题。', type: 'string', defaultValue: '-'
      },{
        param: 'url', description: '接口请求地址，参数会自带::extraParams::。', type: 'string', defaultValue: '-'
      },{
        param: 'key', description: '内部数据的唯一标识的字段名，用于::selectedData::区分。', type: 'string', defaultValue: '-'
      }],
      description: '每一个::ListSearcher::都是由一个::searcherItem::渲染而来，本项目中此类数据有一个专门的文件::share/searcherData.js::。每一个对象的::key::值可用于::ListSearcher::的::type::用于简化调用。'
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '点击后弹出选择框，然后搜索选择回填回输入框，可设置::disabled::。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div style={{ width: '100%' }}>
            <Searcher type="department"
                      listExtraParams={{ flag: 1002 }}
                      labelKey="path"
                      onChange={context.handleChange}/>
            <br/>
            <Searcher type="department"
                      listExtraParams={{ flag: 1002 }}
                      labelKey="path"
                      disabled />
          </div>
        )
      }
    },
    {
      title: '兼容antd的表单',
      description: '本组件可用于antd的::Form::组件中，使用::getFieldDecorator::包裹即可与antd表单一同使用。',
      state: {},
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='部门' style={{ marginBottom: 12 }}>
              {getFieldDecorator('departments', {
                rules: [{
                  required: true,
                  message: '请选择'
                }]
              })(
                <Searcher type="department"
                          listExtraParams={{ flag: 1002 }}
                          labelKey="path"
                          onChange={context.handleChange}/>
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    },
    {
      title: '描述与多行',
      description: '可通过设置::descriptionKey::来给每一个选项设置描述，同样支持搜索，可设置多行显示。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div style={{ width: '100%' }}>
            <Searcher type="country"
                      listExtraParams={{language: context.props.language.code, type: 'country'}}
                      labelKey="country"
                      descriptionKey="code"
                      onChange={context.handleChange}
                      newline/>
          </div>
        )
      }
    },
    {
      title: 'ListSearcher',
      description: '::Searcher::组件内部的::ListSearcher::可单独使用，不依托::Searcher::。',
      state: {
        show: false,
        value: []
      },
      getMethod: context => {
        return {
          handleChange: data => {
            context.setState({ show: false, value: data.result });
            console.log(data)
          }
        }
      },
      getContent: context => {
        const { show, value } = context.state;
        return (
          <div style={{ width: '100%' }}>
            <Button onClick={() => context.setState({ show: true })} type="primary">选择国家</Button>
            <div style={{ marginTop: 10 }}>
              已选择: {value.map(item => <Tag color="magenta" key={item.code}>{item.country}</Tag>)}
            </div>
            <ListSearcher type='country'
                          extraParams={{language: context.props.language.code, type: 'country'}}
                          labelKey="country"
                          descriptionKey="code"
                          onOk={context.handleChange}
                          selectedData={value}
                          visible={show}
                          onCancel={() => context.setState({ show: false })}/>
          </div>
        )
      }
    }
  ]
}
